{{define "post/new.html"}}
    <!DOCTYPE html>
    <html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Post - New</title>

        <!-- Bootstrap Core CSS -->
        <link href="/static/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="/static/css/blog-post.css" rel="stylesheet">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- jQuery -->
        <script src="/static/libs/jquery/jquery.min.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="/static/libs/bootstrap/js/bootstrap.min.js"></script>

        <!-- font awesome -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
        <!-- simplemde -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"/>
        <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

        <!-- code syntax highlighting -->
        <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css"/>

        <!-- x-editable (bootstrap version) -->
        <link href="https://cdn.jsdelivr.net/npm/x-editable@1.5.1/dist/bootstrap3-editable/css/bootstrap-editable.css"
              rel="stylesheet"/>
        <script src="https://cdn.jsdelivr.net/npm/x-editable@1.5.1/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

        <!-- InlineAttachment -->
        <script src="/static/libs/InlineAttachment/inline-attachment.js"></script>
        <script src="/static/libs/InlineAttachment/codemirror-4.inline-attachment.js"></script>

        <!-- bootstrap-switch -->
        <link href="/static/libs/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet"/>
        <script src="/static/libs/bootstrap-switch/js/bootstrap-switch.min.js"></script>

        <script>
            var simplemde;
            $(document).ready(function () {
                simplemde = new SimpleMDE({
                    element: document.getElementById("demo"),
                    autofocus: false,
                    forceSync: true,
                    hideIcons: ["guide"],
                    indentWithTabs: false,
                    tabSize: 4,
                    spellChecker: false,
                    renderingConfig: {
                        singleLineBreaks: true,
                        codeSyntaxHighlighting: true,
                    },
                    showIcons: ["code"],
                    status: false,
                });

                // inlineAttachment
                inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
                    uploadUrl: "/admin/upload",
                    jsonFieldName: "url",
                    onFileUploadResponse: function (xhr) {
                        var result = JSON.parse(xhr.responseText),
                            filename = result[this.settings.jsonFieldName];

                        if (result && filename) {
                            var newValue;
                            if (typeof this.settings.urlText === 'function') {
                                newValue = this.settings.urlText.call(this, filename, result);
                            } else {
                                newValue = this.settings.urlText.replace(this.filenameTag, filename);
                            }
                            var text = this.editor.getValue().replace(this.lastValue, newValue);
                            this.editor.setValue(text);
                            this.settings.onFileUploaded.call(this, filename);
                        }
                        return false;
                    }
                });

                $('#postSave').click(function (event) {
                    event.preventDefault();
                    $("#demo").text(simplemde.value());
                    var tags = new Array();
                    $(".tagButton .tagId").each(function (index, element) {
                        tags.push($(element).text());
                    });
                    $("#tags").val(tags.join(","));
                    $("#postForm").submit();
                });

                $('#addTag').editable({
                    mode: "inline",
                    type: "text",
                    pk: 1,
                    url: "/admin/new_tag",
                    placeholder: "add a tag",
                    success: function (tag) {
                        createButton(tag.data.ID, tag.data.Name);
                    },
                    error: function (e) {
                        console.log(e);
                    },
                    display: function (value, response) {
                        return false;   //disable this method
                    }
                });

                $('#switchbtn').bootstrapSwitch({
                    onText: '公开',
                    offText: '不公开',
                });

            });

            function deleteTag(element) {
                $(element).parent().remove();
            }

            function createButton(tagId, tagName) {
                var button = `<button class="btn btn-default btn-sm tagButton">
                    <a href="/tag/` + tagId + `">` + tagName + `</a>
                    <a class="removeArticleTag" href="#" onclick="deleteTag(this);">
                        <span class="glyphicon glyphicon glyphicon-trash"></span>
                    </a>
                    <span class="tagId" hidden="hidden">` + tagId + `</span>
                    </button>&nbsp;`;
                $("#addTag").before(button);
            }
        </script>

    </head>

    <body>

    {{template "navigation.html"}}

    <div class="container">

        <div class="col-sm-offset-1 col-sm-10">

            <!-- add a new tag -->
            <span id="tagBug">
            <span style="border: none" id="addTag" class="glyphicon glyphicon-edit"></span>


        </span><br/><br/>

            <!-- create or update a article -->
            <form action="/admin/new_post" method="post" id="postForm" class="form-group">
                <input id="tags" name="tags" type="hidden">
                <input name="title" type="text" class="form-control" placeholder="Title"/><br/>
                <textarea id="demo" name="body"></textarea><br/>
                <span id="tagBug">
        <a id="postSave" class="glyphicon glyphicon-saved"
           style="float: right; padding-left: 15px;">保存</a>
        </span>
                <div class="bootstrap-switch-small">
                    <input id="switchbtn" name="isPublished" type="checkbox"/>
                </div>

            </form>

        </div>

    </div>

    {{template "footer.html"}}

    </body>

    </html>
{{end}}